/**
*@description : 本地化存储类
*@version : 1.0
*@date : 2013-10-27
*@author : 网络上抄袭
*/

/**
	1、	localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 
	
	2、 查找后发现对于Chrome Browser, 其缺省存在以下地址：
		C:/Documents and Settings/Administrator/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage
		在这个目录中可以看到一系列以如下方式命名的文件：
		http_login.taobao.com_0.localstorage
		http_t.sina.com.cn_0.localstorage
		chrome_newtab_0.localstorage
		<!--哈哈，这里发现它居然能用sqlite打开！！！！！！！！！！！！-->
		key         value
		———-  ———-
		abc         1
		bcd         2
		id1         abc
		id2         bcd
		
	3、 localStorage的用法：
		localStorage. length:返回现在已经存储的变量数目。
		localStorage. key(n):返回第n个变量的键值(key)。
		localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
		localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。
		localStorage.removeItem(k):删除键值为k的变量。
		localStorage.clear():清空所有变量。
		
	4、	跟localStorage相似的有：
		sessionStorage ：  cookie的存储限制在了4k之内，相比来说，session storage有了更大的存储空间，
						   但至于具体多大，这要参照浏览器厂商的具体实现。
		Database Storage ：对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。
						   而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。
		
		globalStorage ：   这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，
						   localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享
		
**/
$(function(){
	if(!!!window.localStorage){//检测是否支持本地化存储
		alert("浏览器不支持本地化存储,本程序用webkit内核api开发，请选择webkit内核浏览器");
		return;
	}
	//给window对象添加store事件
	if (window.addEventListener) {    
		window.addEventListener("storage", callBackStorage, false); 
	} else {     
		window.attachEvent("onstorage", callBackStorage); 
	};	   		   
		   
	//想缓存中添加内容	   
	function putStorage(key,value){
		window.localStorage.setItem(key,value);
	}
	
	//根据key获得缓存内容
	function getStorage(key){
		return window.localStorage.getItem(key);
	}
	
	//删除缓存
    function removeStorage(key){
		window.localStorage.removeItem(key);
	}
	
	function callBackStorage(e){
		initHistorty();
	}

	/**
	*初始化本地缓存
	*/
	var initHistorty = function(){
		for(var i=1;i<5;i++){
			var dataUrl = getStorage(i);//缓存内容
			if(dataUrl!=null&&dataUrl!=''){//如果不为空，添加图片内容
				//图片
				$("#history_"+i).attr("src",dataUrl);
				//下载链接
				$("#history_download_"+i).attr("href",dataUrl);
				//删除链接
				$("#history_del_"+i).attr("href","javascript:void(0)");
			}else{//如果为空，添加“暂无图片”，去掉删除链接
				//图片
				$("#history_"+i).attr("src",'./images/noimg.png');
				//下载链接
				$("#history_download_"+i)[0].removeAttribute('href');  
				//删除链接
				$("#history_del_"+i)[0].removeAttribute('href');  
			}
		}
	}
	
	
	

	initHistorty();//初始化本地缓存
	
	//保存按钮事件
	$('#saveBtn').bind('click',function(){
		for(var i = 1;i<=4;i++){
			var dataUrl = getStorage(i);
			if(dataUrl == null || dataUrl == ''){
				putStorage(i,canvas.toDataURL());
				$("#history_"+i).attr("src",canvas.toDataURL());
				$("#history_"+i).slideToggle();//添加个动画效果
				$("#history_"+i).fadeIn('fast');//淡入
				initHistorty();//每次添加完，刷新缓存
				return ;
			}
		}			
	});

	//删除图片
	$("table tr td a").click(function(){
		var id = $(this).attr("id");
		if(id.indexOf("del")!='-1'){
			var index = id.substring(id.length-1);
			removeStorage(index);//从缓存中删除内容
			initHistorty();//刷新缓存
			$("#history_"+index).slideToggle();//添加个删除动画效果
			$("#history_"+index).fadeIn('fast');//淡入默认图片
		}
	});
	
	/**
	*处理点击弹出层以为地方，隐藏弹出层
	**/
	document.onmousedown=function(event){
		var e=event ||window.event;
		var elm=e.srcElement || e.target;
		
		if(elm.id!="psBtns"&&elm.type!='range'){
		   $("#psBtns").fadeOut();
		}
		if(elm.id!="filters"){
			$("#filters").fadeOut();
		}
		if(elm.id!="line_size"){
		   $("#line_size").fadeOut();
		}
		if(elm.id!="shapes"){
		   $("#shapes").fadeOut();
		}
		
	}

});



